<template>
  <echart :option="option" :style="{height:`${height}px`}"/>
</template>

<script>
const year = '2023-01-01'
function toNum(date){
  date = `${year} ${date}`;
  return new Date(date).getTime()
}
function timeDifference(date1, date2) {
  date1 = `${year} ${date1}`;
  date2 = `${year} ${date2}`;
  let formatterDate1 = new Date(date1);
  let formatterDate2 = new Date(date2);
  let allMinute = (formatterDate2 - formatterDate1) / (1000 * 60); // 获取两个日期的分钟差
  let hour = allMinute % (60 * 24) / 60; // 计算小时
  let minute = allMinute % (24 * 60) % 60; // 计算分钟
  let res = parseInt(hour) + '小时' + parseInt(minute) + '分钟'
  return res;
}
function formatDuring(millisecond) {
  let hours = parseInt((millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60));
  if(millisecond>0&&hours===0&&minutes===0)
    return "24:00"
  hours = hours<10?`0${hours}`:hours
  minutes = minutes<10?`0${minutes}`:minutes
  return hours + ":" + minutes ;
}
export default {
  name: "gantt-chart",
  props:{
    contents:Array,
    height:{
      type:Number,
      default:300
    },
    barHeight:Number
  },
  data(){
    return {
      option : {},
      zero:toNum("00:00"),
      offset : 44000,
    }
  },
  watch:{
    contents:{
      handler(){
        if(this.contents && this.contents.length>0){
          const contents = [...this.contents]
          this.initData(contents.reverse())
        }

      },
      immediate:true
    }
  },
  methods:{
    initData(contents){
      const data = []
      const categories =[]
      contents.forEach((content, index)=> {
        categories.push(content.title)
        for (let i = 0; i < content.infos.length; i++) {
          const temp = content.infos[i]
          data.push({
            name: temp.name,
            value: [
              index,
              toNum(temp.startTime)+this.offset,
              toNum(temp.endTime)+this.offset,
              timeDifference(temp.startTime,temp.endTime)
            ],
            itemStyle: {
              normal: {
                color: temp.color
              }
            }
          });
        }
      });
      this.initOption(data,categories)
    },
    initOption(data,categories){
      this.option = {
        tooltip: {
          formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] ;
          }
        },
        dataZoom: [{
          type: 'slider',
          filterMode: 'weakFilter',
          showDataShadow: false,
          brushSelect:false,
          top: this.height-27,
          height: 20,
          borderColor: 'transparent',
          backgroundColor: '#e2e2e2',
          handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
          handleSize: 20,
          handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 1,
            shadowColor: '#aaa'
          },
          labelFormatter: ''
        }, {
          type: 'inside',
          filterMode: 'weakFilter'
        }],
        grid: {
          height: this.height-50,
          top:0,
          left:70,
          right:30
        },
        xAxis: {
          min: this.zero,
          max: toNum("24:00"),
          interval:60*60*1000,
          axisLabel: {
            formatter: val=> {
              return formatDuring(val-this.zero)
            }
          }
        },
        yAxis: {
          data: categories
        },
        series: [{
          type: 'custom',
          renderItem: this.renderItem,
          itemStyle: {
            opacity: 0.8
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: data
        }]
      }
    },
    renderItem(params, api) {
      let arr = {
        'k1':[1,2,3],
        'k2':[4,5,6]
      }
      let arr2 = []
      Object.values(arr).forEach(item=>arr2.push(item))
      let arr1 = []
      arr2.forEach(item=>{
        arr1.push.apply(arr1,item)
      })

      let categoryIndex = api.value(0);
      let start = api.coord([api.value(1), categoryIndex]);
      let end = api.coord([api.value(2), categoryIndex]);
      let height = this.barHeight?this.barHeight:api.size([0, 1])[1] * 0.5;
      let rectShape = this.echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height
      }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      });

      return rectShape && {
        type: 'rect',
        shape: rectShape,
        style: api.style()
      };
    }
  },
};
</script>

<style scoped>

</style>
